<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>waypoints中destroy方法的使用</title>
        <style>
            *{
                padding: 0;
                margin: 0;
                box-sizing:border-box;
            }
            ul{
                list-style:none;
            }
            .np-example{
                width: 1000px;
                margin: 0 auto;
            }
            .np-container{
                float: left;
                width: 50%;
                padding: 0 10px 0 0;
            }
            .np-container{
                height: 400px;
                overflow: auto;
            }
            .np-left{
                margin: 10px 0;
                height: 100px;
                background-color: #555;
            }
            .np-right{
                height: 231px;
                margin: 16px 0;
                background-color: #aaa;
            }
            .np-current{
                background-color: green;
            }
            .np-previous{
                background-color: red;
            }
            .np-next{
                background-color: blue;
            }
            .waypoint{
                box-shadow:0 0 0 5px rgba(255,0,0,.5);
            }
        </style>
    </head>
    <body>
        <button class="destroyLeftContainer">清除左栏waypoint实例</button>
        <button class="destroyRightContainer">清除右栏waypoint实例</button>
        <div class="np-example">
          <ul class="np-container" id="leftContainer">
            <li class="np-left waypoint np-next">$个盒子</li>
            <li class="np-left waypoint np-current">\$个盒子/$个盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
            <li class="np-left waypoint">盒子</li>
          </ul>

          <ul class="np-container" id="rightContainer">
            <li class="np-right waypoint np-previous">1盒子</li>
            <li class="np-right waypoint np-current">2盒子</li>
            <li class="np-right waypoint np-next">3盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
            <li class="np-right waypoint">盒子</li>
          </ul>
        </div>
        <div id="test">测试</div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="js/waypoints.min.js"></script> -->
        <script src="js/jquery.waypoints4.min.js"></script>
        <script>
        var leftElements = document.getElementsByClassName('np-left')
        var rightElements = document.getElementsByClassName('np-right')
        var leftElementsArr=Array.prototype.slice.call(leftElements);
        var rightElementsArr=Array.prototype.slice.call(rightElements);
        var test=document.getElementById("test");
        function notifyInnerHTML() {
          alert(this.element.innerHTML + ' hit')
        }

        leftElementsArr.forEach(function(element) {
            // element.call(this);
          new Waypoint({
            element: element,
            handler: notifyInnerHTML,
            context: document.getElementById('leftContainer')
          })
        })

        rightElementsArr.forEach(function(element) {
            // element.call(this);
          new Waypoint({
            element: element,
            handler: notifyInnerHTML,
            context: document.getElementById('rightContainer')
          })
        })

        $('button.destroyLeftContainer').on('click', function() {
          var element = document.getElementById('leftContainer')
          var context = Waypoint.Context.findByElement(element)
          context.destroy()
        });

        $('button.destroyRightContainer').on('click', function() {
          var element = document.getElementById('rightContainer')
          var context = Waypoint.Context.findByElement(element)
          context.destroy()
        });
        </script>
    </body>
</html>